<template>
    <div class="insure">
        <x-header v-show="!isWeChar">
            <div slot="default" class="common__header--title">{{msg}}</div>
            <div @click="goBack" slot="overwrite-left"><img slot="icon" src="~assets/x3/ico/goback1.png" class="go-back"></div>
        </x-header>
        <group class="reportImmediately__group">
            <div class="insure__formPolicy ">
                <transition name="fade">
                    <div>
                        <x-input placeholder="保单号" readonly v-model="queryData.autoPolNo" required>
                            <div class="insure__input" slot="label">保单号&nbsp &nbsp</div>
                        </x-input>

                        <x-input v-show="!type" placeholder="邮箱地址 ( 接收上传资料信息 )" v-model="queryData.email" is-type="email" required>
                            <div class="insure__input" slot="label"><img src="~assets/x3/ico/icon-name.png" class="icon-img">&nbsp&nbsp</div>
                        </x-input>

                        <datetime v-show="type" placeholder="事故时间" :start-date="sDate" :end-date="dateNow" confirm-text="完成" cancel-text="取消" class="insure__input" :format="format" year-row="{value}年" month-row="{value}月" minute-row="{value}分" day-row="{value}日" hour-row="{value}点" v-model="queryData.incidentTime">
                            <div class="insure__input" slot="title">
                                <img src="~assets/x3/ico/icon-date.png" class="icon-img">&nbsp&nbsp
                            </div>
                        </datetime>

                        <cell v-show="type">
                            <selector class="insure_sele" slot="after-title" v-model="queryData.claimType" placeholder="理赔类型 " :options="cliaimsType">
                            </selector>
                            <img src="~assets/x3/ico/icon-type.png" slot="icon" class="icon-img">&nbsp&nbsp
                        </cell>
                        <x-input v-show="type" placeholder="省份" v-model="queryData.province" required>
                            <div class="insure__input" slot="label"><img src="~assets/x3/ico/icon-province.png" class="icon-img">&nbsp&nbsp</div>
                        </x-input>
                        <x-input v-show="type" placeholder="城市" v-model="queryData.city" required>
                            <div class="insure__input" slot="label"><img src="~assets/x3/ico/icon-city.png" class="icon-img">&nbsp&nbsp</div>
                        </x-input>
                        <x-input v-show="type" placeholder="详细地址" v-model="queryData.incidentStreetAddress" required>
                            <div v-show="type" class="insure__input" slot="label"><img src="~assets/x3/ico/icon-addre.png" class="icon-img">&nbsp&nbsp</div>
                        </x-input>
                        <x-input v-show="type" placeholder="联系人" v-model="queryData.userName" required>
                            <div class="insure__input" slot="label"><img src="~assets/x3/ico/icon-name.png" class="icon-img">&nbsp&nbsp</div>
                        </x-input>
                        <x-input v-show="type" placeholder="联系电话" v-model="queryData.phoneNo" required>
                            <div class="insure__input" slot="label"><img src="~assets/x3/ico/icon-phone.png" class="icon-img">&nbsp&nbsp</div>
                        </x-input>
                        <x-textarea v-show="type" v-model="queryData.incidentNotes" class="repIm__textarea" :max="2000" :autosize="true" name="description" placeholder="备注">
                            <div class="insure__input" slot="label"><img src="~assets/x3/ico/icon-remark.png" class="icon-img">&nbsp&nbsp</div>
                        </x-textarea>

                    </div>
                </transition>
            </div>
        </group>
        <div class="insure__footer">
            <div @click="reportImmediately()" class="insure__rightbtn">上传资料</div>
        </div>

    </div>
</template>

<script>
import { RequestUrl } from "src/common/url";
import {
    Mutations,
    policyHolderType,
    Gender,
    PerIdentifyType,
    EntIdentifyType,
    benefType,
    insuredidentity,
    intervalTime,
    RouteUrl,
    BaseService
} from "src/common/const";
import {
    XHeader,
    Group,
    Cell,
    XInput,
    Datetime,
    XSwitch,
    Selector,
    XButton,
    XDialog,
    CellFormPreview,
    Actionsheet,
    TransferDom,
    Toast,
    XTextarea,
    Box
} from "vux";
import Validation from "src/common/util/validation";
import DateUtil from "src/common/util/dateUtil";
import { mapState, mapActions } from "vuex";
export default {
    components: {
        CellFormPreview,
        XDialog,
        Selector,
        XHeader,
        Group,
        Cell,
        XInput,
        Datetime,
        XSwitch,
        XButton,
        Actionsheet,
        TransferDom,
        Toast,
        XTextarea,
        Box
    },
    computed: mapState({
        // insure: "insure",
        isLoading: "isLoading",
        user: "user",

        saveInsure: "saveInsure",
        detailsStore: "detailsStore",
        indexSeleCountry: "seleCountry",
        isWeChar: "isWeChar",
        order: "order",
        seleValue: "seleValue",

    }),
    data() {
        return {
            showImages: [],//界面显示的图片数组
            uploadImages: [],//上传的图片数组

            cliaimsType: [],
            plainList: [],
            testTime: "",
            haveError: false,
            errorMessage: '',
            queryData: {
                autoPolNo: '',
                incidentTime: '',
                claimType: '',
                province: '',
                city: '',
                incidentStreetAddress: '',
                incidentNotes: '',
                userName: '',
                phoneNo: '',
                riskCode: '',
                email: ''

            },
            seleOrder: {},
            isCanQuery: true,
            sDate: DateUtil.getDateyMdSubtract(intervalTime.YEAR), //投保开始时间
            dateNow: DateUtil.getNowDateStr_Ymd(), //投保结束时间
            type: true,
            msg: "马上报案",
            format: "YYYY-MM-DD HH:mm",
            curTime: DateUtil.getNowDateStr_Ymd(),
            isNowDay: false,
        }
    },
    watch: {

    },
    filters: {

    },
    methods: {
        reportImmediately() {

            $(".weui-input").focus();
            $(".weui-input").blur();

            if (this.type) {
                if (this.queryData.autoPolNo == "") {
                    return this.showErrorMsg("保单号不能为空！");
                } else if (this.queryData.incidentTime == "") {
                    return this.showErrorMsg("事故时间不能为空！");
                } else if (this.queryData.claimType == "") {
                    return this.showErrorMsg("理赔类型不能为空");
                } else if (this.queryData.province == "") {
                    return this.showErrorMsg("省份不能为空");
                } else if (this.queryData.city == "") {
                    return this.showErrorMsg("城市不能为空");
                } else if (this.queryData.incidentStreetAddress == "") {
                    return this.showErrorMsg("详细地址不能为空");
                } else if (this.queryData.userName == "") {
                    return this.showErrorMsg("联系人不能为空");
                } else if (this.queryData.phoneNo == "") {
                    return this.showErrorMsg("联系电话不能为空");
                }
                if (Validation.isErrPhone(this.queryData.phoneNo)) {
                    return this.showErrorMsg("请输入有效手机号");
                }
            } else {
                if (this.queryData.email == "") {
                    return this.showErrorMsg("邮箱不能为空");
                }
                if (!Validation.isEmail(this.queryData.email.toLowerCase()) && !Validation.isChName(this.queryData.email)) {
                    return this.showErrorMsg("邮箱格式不正确");
                }
            }
            let querySetData = JSON.parse(JSON.stringify(this.queryData));
            let curTimeYmlHm = DateUtil.getNowDateStr_Ymdhm();

            if (this.isNowDay) {
                querySetData.incidentTime = DateUtil.getNowDateStr_Ymd() + " " + querySetData.incidentTime;
            }
            if (querySetData.incidentTime > curTimeYmlHm) {
                return this.showErrorMsg("报案时间不能大于当前时间");
            }
            this.$common.storeCommit(this, Mutations.CLIAIMS_DATA, querySetData);
            this.$common.goUrl(this, RouteUrl.REPORT_UPLOAD_FILES);
        },
        goBack() {
            this.$common.goBack(this);
        },
        showErrorMsg(errorMsg) {
            this.$vux.alert.show({ content: this.$common.alertMsg(errorMsg, "red;") });
            setTimeout(() => {
                this.$vux.alert.hide();
            }, 3000);
            return false;
        },
        initData() {
            let _this = this;
            // setTimeout(function() {
            let time = "";
            if (typeof (this.seleValue.cliaimsData.incidentTime) == "undefined" || this.seleValue.cliaimsData.incidentTime == "undefined" || this.seleValue.cliaimsData.incidentTime == null) {
                time = "";
            } else {
                time = this.seleValue.cliaimsData.incidentTime.split('(');
            }
            // if (this.queryData.incidentTime < this.order.reportPolicyNo.enddate) {
            //     this.queryData.incidentTime = "";
            // }
            setTimeout(function () {
                _this.queryData.incidentTime = time[0];
                if (_this.queryData.incidentTime < _this.order.reportPolicyNo.enddate) {
                    _this.queryData.incidentTime = "";
                }
            }, 0);
            this.queryData = this.seleValue.cliaimsData;
            // }, 0);
            // this.queryData = this.seleValue.cliaimsData;
            this.queryData.autoPolNo = this.order.reportPolicyNo.policyNo;
            this.queryData.type = this.order.reportPolicyNo.type;
            if (this.queryData.type == 1) {
                this.type = true;
                this.msg = "马上报案";
                let queryData = {
                    code: this.order.reportPolicyNo.riskCode,
                    _this: this
                }
                this.queryData.riskCode = this.order.reportPolicyNo.riskCode;
                this.$common.storeCommit(this, Mutations.CLIAIMS_TYPE, queryData);
                // let startdate = DateUtil.getDateStr_YmdByTs(this.order.reportPolicyNo.startdate);
                // let enddate = DateUtil.getDateStr_YmdByTs(this.order.reportPolicyNo.enddate);

                // this.dateNow = enddate;
                let dataString = this.order.reportPolicyNo.startdate.split(' ');

                // let dateNow = this.dateNow;   //e
                this.sDate = dataString[0];   //s
                if (this.sDate == this.curTime) {
                    this.isNowDay = true;
                    this.format = "HH:mm";
                }
            } else {
                this.msg = "上传资料";

                this.type = false;
            }
            if (this.queryData.autoPolNo == "" || typeof (this.queryData.autoPolNo) == "undefined") {
                this.$common.goUrl(this, RouteUrl.INDEX);
                return;
            }

            // this.$http.post(RequestUrl.GET_CLIAIMS_TYPE, queryData).then(function(res) {
            //     _this.cliaimsType = res.result;
            // });
        }
    },
    beforeRouteEnter(to, from, next) {
        sessionStorage["REPORTIM_FORM_URL"] = from.path;
        next();
    },
    beforeMount() {
        if (sessionStorage["REPORTIM_FORM_URL"] == "/") {
            this.$common.goUrl(this, RouteUrl.INDEX);
        }
    },
    beforeDestroy() {
        this.$common.storeCommit(this, Mutations.CLIAIMS_DATA, this.queryData);
    },
    mounted() {
        document.title = '信息填写';
        this.initData();
        this.$init.subPageInit(this);

    }
};
</script>

<style  lang="scss">
.imgs {
  margin-bottom: 100px;
  div {
    display: block;
    float: left;
    width: 100px;
    height: 100px;
    margin: 0 10px;
  }
  img {
    display: block;
    width: 100%;
    height: 100%;
    margin: auto;
    margin-bottom: 10px;
  }
  p {
    display: block;
    clear: both;
    width: 100%;
    margin: 10px auto;
  }
}

.radio-check {
  label {
    vertical-align: middle;
  }
}

.common__clause {
  margin-bottom: 50px;
}

.insure__iconspan {
  position: absolute;
  margin-top: 4px;
  width: 4px;
  height: 18px;
  background-color: #c8161d;
}

.insure__list--title {
  font-size: 15px;
  color: #c8161d;
}

.insure__iconspan--title {
  margin-left: 9px;
  font-size: 14px;
}

.insure__formPolicy {
  border: 1px solid #e7e7e7;
  margin: 0 18px;
}

.reportImmediately__group {
  margin-top: -5px;
  .weui-cells {
    padding: 15px 0;
  }
}

.insure__formPolicy--group {
  .vux-no-group-title {
    padding-bottom: 20px;
  }
}

.insure__footer {
  position: fixed;
  bottom: 0px;
  z-index: 5;
  width: 100%;
  height: 47px;
  background-color: white;
  div {
    height: 100%;
    line-height: 47px;
    text-align: center;
    font-size: 20px;
  }
  box-shadow: 0px 0px 10px 1px #efefef;
}

.insure__leftbtn {
  float: left;
  width: 35%;
  background: #fff;
  color: #c8161d;
  span {
    color: #f6690a;
  }
}

.insure__rightbtn {
  background: #c8161d;
  color: #fff;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter,
.fade-leave-to {
  transition: opacity 0.1s;
}

.insure__red {
  color: red;
}

.insure__green {
  color: green;
}

.insure__policyHolderType {
  font-size: 12px;
  color: #7f7f7f;
}

.insure__middle {
  display: initial;
  vertical-align: super;
}

.insure__input {
  line-height: 0px;
  font-size: 14px;
  color: #7f7f7f !important;
  .weui-cell__ft {
    text-align: justify;
    color: #999999;
  }
}

.weui-label {
  font-size: 14px;
  color: #7f7f7f;
}

input::-webkit-input-placeholder {
  font-size: 14px;
  color: #7f7f7f;
}

.insure__img {
  width: 15px;
  vertical-align: middle;
}

.insure__sure {
  vertical-align: middle;
}

.insure__protocol {
  vertical-align: middle;
  color: #c8161d;
}

.insure__radio {
  display: inline-flex;
}

.insure__input--Bene {
  color: #000;
}

.insure__iconspan--delete {
  font-size: 12px;
  color: #c8161d;
  border: 1px solid #c8161d;
  border-radius: 5px;
  padding: 2px;
  float: right;
  margin-right: 8px;
}

.insure__base--padding {
  padding-bottom: 20px;
}

.insure__clauseRead {
  border-color: aliceblue;
  white-space: pre-wrap;
  vertical-align: top;
  width: 100%;
  font-size: 15px;
  height: 75vh;
  font-family: Microsoft YaHei;
  overflow-y: scroll;
  border: 1px solid #f3f3f3;
}

.dialog-Einv {
  // padding: 15px !important;
  .weui-dialog {
    max-width: 90% !important;
  }
}

.insure_sele {
  .weui-cell__bd {
    .weui-select {
      height: 20px;
      line-height: 20px; // padding-left: 0px;
      padding-left: 10px;
    }
  }
  .weui-cell__bd::after {
    right: -9px !important;
  }
}

.weui-form-preview__label {
  margin-right: 0em !important;
}

.insure__actionsheet {
  .weui-actionsheet__cell {
    padding: 0px !important;
    text-align: unset !important;
  }
}

.repIm__textarea {
  font-size: 15px;
}
</style>
